<template>
	<!-- 外层包装 -->
	<view class="page">
		<u-navbar title="首页" :is-back="false" :background="{
            url: 'https://www.yplm888.com/uploads/20220803/7ed305f9a93ba50b049a7725662b18cc.png',
            repeat: 'no'
        }">
		</u-navbar>
		<view class="" @click.stop="toSearch" style="padding-bottom: 10rpx;">
			<my-input :disabled="true"></my-input>
		</view>
		<scroll-view class="index-all-wrap" scroll-y="true" :style="'height:' + scrollH+'rpx;'" refresher-enabled="true"
			:refresher-triggered="triggered" :refresher-threshold="50" @refresherpulling="onPulling"
			@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">
			<!-- 轮播图 -->
			<view class="index-banner-wrap">
				<swiper class="index-banner swiper" circular="false" :indicator-dots="indicatorDots"
					:autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item v-for="(item, index) in bannerList" :key="item.id">
						<image v-if="item.typeswitch == 1" class="index-banner-img" style="border-radius: 40rpx;"
							:src="item.image" mode="aspectFill" @click="bannerTo(item)"></image>
						<image v-else class="index-banner-img" style="border-radius: 40rpx;" :src="item.image"
							mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 课程分类 -->
			<view class="index-course-wrap">
				<view @click="getCourseByClass(item.path, item.isTar)" class="know-item course-item scroll-view-item_H"
					v-for="(item, index) in course_class" :key="index">
					<image :src="item.img" mode="aspectFit"></image>
					<text>{{item.text}}</text>
				</view>
			</view>
			<!-- 新闻资讯 -->
			<view class="news-wrap">
				<view class="news-consulting">
					<span class="news-ltext">联盟</span>
					<span class="news-rtext">资讯</span>
				</view>
				<text class="news-shu">|</text>
				<swiper class="swiper-wrap" :vertical="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item, index) in news" :key="item.id" class="swiper-item"
						@click="toAudioDetail(item)">
						<text class="news-title u-line-2">{{item.createtime | date('yyyy-mm-dd')}} {{item.title}}</text>
					</swiper-item>
				</swiper>
				<text class="news-arow iconfont icon-jinrujiantou"></text>
			</view>
			<!-- 品牌故事-->
			<view class="course-list-wrap">
				<view class="live-title-wrap live-content-title-wrap" style="z-index: 66; margin-bottom: 10rpx;">
					<!-- 标题 更多 -->
					<view class="icon-title-wrap">
						<text class="live-title live-content-title font-style-xie">品牌故事</text>
					</view>
					<text class="more content-more-btn" @click.stop="coursemore('broandStory', false)">
						更多&nbsp;&nbsp;
						<text class="iconfont icon-jinrujiantou c-more-btn-icon"></text>
					</text>
				</view>
				<view class="new-story-main">
					<view class="new-story-list" @click="toStory(item)" v-for="(item, index) in broandStory"
						:key="index">
						<view>
							<view class="see">
								<u-icon name="eye-fill" color='#000' size="16" style='margin-right: 5rpx;'></u-icon>
								{{item.reading_volume}}
							</view>
							<view class="icon-calendar">
								<u-icon class='icon' name="calendar" size="16"></u-icon>
								<text style="margin-left: 10rpx;">{{item.createtime | date('yyyy-mm-dd')}}</text>
							</view>
							<u-image :src="item.cover_image" width="340rpx" height="240rpx" border-radius="30rpx;" :lazy-load="true"></u-image>
							<view class="story-name u-line-1">
								{{item.name}}
							</view>
						</view>
					</view>

				</view>
			</view>
			<view class="">
				<!-- 热门课程 -->
				<view class="course-list-wrap">
					<view class="live-title-wrap live-ketang-title-wrap">
						<!-- 热门课程 -->
						<view class="icon-title-wrap">
							<text class="live-title live-ketang-title font-style-xie">热门课程</text>
						</view>
						<text @click="coursemore('hotClasses',true)" class="more content-more-btn">更多&nbsp;&nbsp;<text
								class="iconfont icon-jinrujiantou c-more-btn-icon"></text></text>
					</view>

					<!-- 热门课堂列表 -->
					<view class="live-ketang-wrap hot-class-main">
						<view class="remen-class-list" @click="toHotClass(item.id)" v-for="(item, index) in hotClassesList" :key="item.id">
							<u-image border-radius="30rpx;" :src="item.bigimage" mode="widthFix" :lazy-load="true"></u-image>
							<view class="remen-play">
								<view class="remen-play-left">
									<view class="text u-line-1">{{item.name}}</view>
									<view style="margin-left: 15rpx;">
										<u-icon name="red-packet" color="#fe466b" size="30"></u-icon>
										<text style="color: #fe466b;margin-left: 5rpx;">{{item.money}}</text>
										<view style="color: #fe466b; font-size: 20rpx;">
											兑换人次：{{item.sales_volume}}
										</view>
									</view>
								</view>
							</view>
							<view class="icon-eyes">
								<u-icon class='icon' name="eye"></u-icon>
								<text style="margin-left: 10rpx;">{{item.reading_volume}}</text>
							</view>
							<view class="icon-calendar">
								<u-icon class='icon' name="calendar"></u-icon>
								<text style="margin-left: 10rpx;">{{item.createtime | date('yyyy-mm-dd')}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 金牌军师 -->
				<view class="course-list-wrap">
					<view class="live-title-wrap live-ketang-title-wrap">
						<view class="icon-title-wrap">
							<text class="live-title live-ketang-title font-style-xie">金牌军师</text>
						</view>
						<text @click="coursemore('junshi',true)" class="more content-more-btn">
							更多&nbsp;&nbsp;
							<text class="iconfont icon-jinrujiantou c-more-btn-icon"></text>
						</text>
					</view>
					<view>
						<scroll-view class="a" scroll-x="true" @scroll="scroll" scroll-left="120">
							<view @click="toJunshi(item.id)" class="a-item u-font-10" v-for="(item, index) in junshiList" :key="item.id">
								<view class="top-info">
									<view class="">
										<u-icon class='icon' name="calendar" size='20'></u-icon>
										<text style="font-size: 20rpx;">{{item.createtime | date('yyyy-mm-dd')}}</text>
									</view>
									<view class="">
										<u-icon class='icon' name="eye" size='20'></u-icon>
										<text style="font-size: 20rpx;">{{item.reading_volume}}</text>
									</view>
								</view>
								<u-avatar :src="item.image" size='large'></u-avatar>
								<view class="name">{{item.name}}</view>
								<view class="text u-line-2">{{item.title}}</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<!-- 最新文章 -->
				<view class="course-list-wrap">
					<!-- 最新文章 -->
					<view class="la-wrap">
						<view class="live-title-wrap live-content-title-wrap">
							<!-- 标题 更多 -->
							<view class="icon-title-wrap">
								<text class="live-title live-content-title font-style-xie">最新文章</text>
							</view>
							<text @click="coursemore('news', true)" class="more content-more-btn">
								更多&nbsp;&nbsp;
								<text class="iconfont icon-jinrujiantou c-more-btn-icon"></text>
							</text>
						</view>
					</view>
					<view class="course-wrap">
						<view @click="viewContentInfo(item)" class="live-list live-list-know"
							v-for="(item, index) in list_info" :key="item.id">
							<view class="live-list-img-wrap">
								<image class="live-list-img new-img" :src="item.image" mode="aspectFill">
								</image>
								<!-- <u-image border-radius="30rpx;" :src="item.bigimage" mode="widthFix" :lazy-load="true"></u-image> -->
							</view>
							<view class="live-list-info">
								<view class="live-c-title u-line-1">{{item.title}}</view>
								<view class="u-line-2 u-font-13" style="color: #c3c3c3; height: 90rpx;">{{item.title}}
								</view>
								<view class="live-teacher-price" style="margin-left: -20rpx;">
									<u-icon class="teacher-name" name="calendar" color='#ccc'></u-icon>
									<text class="teacher-name" style="color: #c3c3c3;">{{item.releasetime}}</text>
								</view>
							</view>
						</view>
					</view>
					<template v-if="kongkong4 == true">
						<view :class="{xiangziwrap : (kongkong4 == true)}">
							<image class="xiangzi" src="https://www.yplm888.com/uploads/20240204/33acb45789c60e4873d9fbde4690f543.png" mode="aspectFill"></image>

							<text :class="{xiangzi_txt : (kongkong4 == true)}">暂无数据</text>
						</view>
						<view class="xiangzispace"></view>
					</template>
				</view>
			</view>
		</scroll-view>
		<u-toast ref="uToast" />
		<privacy-popup ref="privacyPopup" @confirm="confirm"></privacy-popup>
	</view>
</template>

<script>
	// 引入模板+
	import myInput from '../components/my-input.vue'
	// import PrivacyPopup from "../components/privacyPopup.vue";

	const app = getApp();
	export default {
		components: {
			myInput,
			// PrivacyPopup
		},
		data() {
			return {
				showPrivacy: getApp().globalData.showPrivacy,
				scrollH: 0,
				swiperheight: 0, //高度
				bannerList: {},// 轮播图数据
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				live_demo: [],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				course_class: [{
						text: '军师团队',
						img: 'https://www.yplm888.com/uploads/20240204/4a8d796ebe77e74233f77edc8b10e2d5.png',
						path: '/pages/junshi/junshi',
						isTar: true
					},
					{
						text: '经典案例',
						img: 'https://www.yplm888.com/uploads/20240204/65a33e01c8b8ac8c3e38a529bc737faf.png',
						path: '/packageB/pages/case/case'
					},
					{
						text: '经验分享',
						img: 'https://www.yplm888.com/uploads/20240204/c4fa17dde1654c1f432fe9d9587e80b5.png',
						path: '/packageB/pages/expShore/expShore',
					},
					{
						text: '主题讲座',
						img: 'https://www.yplm888.com/uploads/20240204/58e085d1083055299e11b33dc98c88c2.png',
						path: '/packageB/pages/themeLecture/themeLecture'
					},
					{
						text: '帮助中心',
						img: 'https://www.yplm888.com/uploads/20240425/60f6019a8b48e75fe03eadc39d9b8ce7.png',
						path: '/packageB/pages/liveBack/liveBack'
					},
					{
						text: '专属解析',
						img: 'https://www.yplm888.com/uploads/20240731/cb92c24fe18861a193578fee9d1cd7d8.png',
						path: '/packageB/pages/analysis'
					},
					{
						text: '问题解答',
						img: 'https://www.yplm888.com/uploads/20240204/77e5d569c8fe9706c512a157ad9387f0.png',
						path: '/packageB/pages/salary/liveBack'
					},
					// {
					// 	text: '听课排名',
					// 	img: require('@/static/images/index/5.png'),
					// 	path: '/pages/salary/salary'
					// },
					{
						text: '联盟组长',
						img: 'https://www.yplm888.com/uploads/20240204/acbd60e192f9b02d4621cb6f5da2aa89.png',
						path: '/pages/teamGroups/teamGroups'
					}
				],
				junshiList: [],
				broandStory: [],
				list_info: [], //内容列表
				hotClassesList: [], //热门精选
				kongkong4: false,
				news: {},
				triggered: false,
			}
		},
		// 监听导航按钮点击事件
		// onNavigationBarButtonTap() {
		// 	this.navigateTo({
		// 		url: '../add-input/add-input'
		// 	})
		// },
		onShow: function() {
			// let token = uni.getStorageSync('token')
			// if (token) {
			// 	this.getUsrInfo()
			// }
			// #ifdef APP-PLUS
			plus.screen.unlockOrientation(); //解除屏幕方向的锁定，但是不一定是竖屏；
			plus.screen.lockOrientation('portrait-primary'); //锁死屏幕方向为竖屏
			// #endif
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.scrollH = res.windowHeight * 750 / res.windowWidth;
					// #ifdef MP-WEIXIN
					that.scrollH = res.windowHeight * 750 / res.windowWidth - parseInt(res.safeArea.top) - 200;
					// #endif
				}
			});
		},
		computed: {
			token() {
				return uni.getStorageSync('token')
			}
		},
		onLoad() {
			wx.getPrivacySetting({
			  success: res => {
				// 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
				if (res.needAuthorization) {
				  // 需要弹出隐私协议
				  this.showPrivacy = true
				} else {
				  // 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用隐私接口
				}
			  },
			  fail: () => {},
			  complete: () => {}
			})
				
			this._freshing = false;
			var that = this;
			this.weikeId()
			this.initData()
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100);
					this.swiperheight = height;
				}
			});
		},
		methods: {
			confirm() {
				this.showPrivacy = false;
			},
			getPrivacy() {
				if (getApp().globalData.showPrivacy) {
					this.$refs.privacyPopup.$refs.popup.open();
					return;
				}
			},
			// 获取用户信息
			getUsrInfo() {
				this.$u.api.getUserInfo().then(res => {
					this.$store.commit('setUserInfo', res.data)
					uni.setStorageSync('userinfo', res.data)
				})
			},
			onPulling(e) {
				this.triggered = true;
			},
			async onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				this.page = 1;
				await setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
					// let token = uni.getStorageSync('token')
					// if (token) {
					// 	this.getUsrInfo()
					// }
					this.initData();
				}, 1000);
				uni.showToast({
					title: '刷新成功',
					duration: 1000
				})
			},
			onRestore() {
				this.triggered = false; // 需要重置
			},
			onAbort() {},
			weikeId() {
				this.$u.api.getWeikeId().then(res => {
					this.classType = res.data[0].courseclassification_id
				})
			},
			toSearch() {
				uni.navigateTo({
					url: '/packageB/pages/search/search'
				})
			},
			toStory(item) {
				let token = uni.getStorageSync('token')
				if (token) {
					if (item.type == 0) {
						this.$u.route('/packageB/pages/hostpotDetail/hostpotDetail', {
							id: item.id,
							title: item.title,
							pageType: 'broandStory'
						})
					} else {
						this.$u.route('/packageB/pages/videosDetail', {
							id: item.id,
							title: item.title,
							pageType: 'broandStory'
						})
					}
				} else {
					uni.removeStorageSync('userinfo');
					uni.showToast({
						title: '请登录后操作',
						duration: 1000,
						icon: 'error',
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/my',
						})
					}, 1000)
				}
			},
			toHotClass(id) {
				let token = uni.getStorageSync('token')
				if (token) {
					this.$u.route('/packageB/pages/hotClassDetail/hotClassDetail', {
					})
				} else {
					uni.removeStorageSync('userinfo');
					uni.showToast({
						title: '请登录后操作',
						duration: 1000,
						icon: 'error',
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/my',
						})
					}, 1000)
				}
			},
			toAudioDetail(item) {
				let token = uni.getStorageSync('token')
				if (token) {
					this.$u.route('/packageB/pages/hostpotDetail/hostpotDetail', {
						id: item.id,
						title: item.title,
						pageType: 'Journa'
					})
				} else {
					uni.removeStorageSync('userinfo');
					uni.showToast({
						title: '请登录后操作',
						duration: 1000,
						icon: 'error',
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/my',
						})
					}, 1000)
				}
			},
			viewContentInfo(data) {
				let token = uni.getStorageSync('token')
				if (token) {
					if(data.type_switch == 1){
						let id = data.id;
						this.$u.route('/packageB/pages/articleDetail', {id})
					}else{
						this.$u.route('/packageB/pages/about/about', {
							url: encodeURIComponent(data.url),
							title: data.title
						})
					}
				} else {
					uni.removeStorageSync('userinfo');
					this.$refs.uToast.show({
						isTab: true,
						title: '请登录后查看',
						type: 'error',
						url: '/pages/my/my'
					})
				}
				
			},
			toJunshi(id) {
				let token = uni.getStorageSync('token')
				if (token) {
					this.$u.route('/packageB/pages/junshiDetail/junshiDetail', {
						id
					})
				} else {
					uni.removeStorageSync('userinfo');
					// uni.showToast({
					// 	title: '请登录后操作',
					// 	duration: 1000,
					// 	icon: 'error',
					// })
					// setTimeout(() => {
					// 	uni.switchTab({
					// 		url: '/pages/my/my',
					// 	})
					// }, 1000)
					this.$refs.uToast.show({
						isTab: true,
						title: '请登录后查看',
						type: 'error',
						url: '/pages/my/my'
					})
	}
			},
			// 根据分类查看课程列表
			getCourseByClass(path, isTar) {
				if (path == '/pages/classes/classes') {
					this.$u.route({
						url: path + "?classType=" + this.classType,
						type: 'reLaunch',
					})
					return
				}
				if (isTar) {
					uni.switchTab({
						url: path
					})
				} else {
					uni.navigateTo({
						url: path
					});
				}
			},
			initData() {
				// 获取banner
				this.$u.api.getBanner().then(res => {
					this.bannerList = res.data.data
				})
				// 获取新闻
				let newsQuary = {
					hot_switch: 1
				}
				this.$u.api.getArticleList(newsQuary).then(res => {
					this.list_info = res.data
				})
				// 获取新闻动态
				this.$u.api.JournalismList().then(res => {
					this.news = res.data
				})
				// 获取品牌故事
				this.$u.api.BrandstoryList({
					hot_switch: 1,
					limit:2,
				}).then(res => {
					this.broandStory = res.data
				})
				// 热门课程
				this.$u.api.getClassList({
					hot_switch: 1
				}).then(res => {
					this.hotClassesList = res.data.splice(0, 2)
				})
				// 军师
				this.$u.api.getJunshiTeamList().then(res => {
					this.junshiList = res.data
				})
			},
			//官方滚动方法
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			bannerTo(item) {
				/* uni.navigateTo({
					url: '../about/banner?url=' + encodeURIComponent(JSON.stringify(item.url)) + '&title=' + item
						.title,
				}); */
				let token = uni.getStorageSync('token')
				if (token) {
					this.$u.route('/packageB/pages/index/getClassDetail', {
						item
					})
				} else {
					uni.removeStorageSync('userinfo');
					uni.showToast({
						title: '请登录后操作',
						duration: 1000,
						icon: 'error',
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/my',
						})
					}, 1000)
				}
			},
			search() {
				uni.navigateTo({
					url: "/packageB/pages/search/search"
				})
			},

			//更多
			coursemore(name, isTab) {
				let path = {
					junshi: '/pages/junshi/junshi',
					news: '/pages/news/news',
					broandStory: '/packageB/pages/broandStory/broandStory',
					hotClasses: '/pages/classes/classes'
				}
				if (isTab) {
					uni.switchTab({
						url: path[name]
					})
				} else {
					uni.navigateTo({
						url: path[name],
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	@import url("/static/css/review.css");
	@import url("/static/css/index.css");
	@import url("/static/css/course_list.css");

	.a {
		white-space: nowrap;
		width: 100%;
		height: 400rpx;
	}

	.a-item {
		vertical-align: top;
		display: inline-block;
		height: 350rpx;
		width: 300rpx;
		border-radius: 30rpx;
		box-shadow: 0 0px 12px 0 rgba(0, 0, 0, 0.1);
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		text-align: center;
		margin: 20rpx 0 10rpx 10rpx;

		.top-info {
			margin: 0 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 0rpx;
			color: #fe466b;
			font-size: 16rpx;
			margin-bottom: 30rpx;
		}

		.name {
			margin-top: 20rpx;
			text-align: center;
			font-size: 35rpx;
			font-weight: 700;
		}

		.text {
			white-space: pre-wrap;
			margin: 0 10rpx;
			// height: 60rpx;
			text-align: center;
			font-size: 22rpx;
			color: #c3c3c3;
			word-break: break-all;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}
	}

	// 热门课程
	.remen-class-list {
		margin: 0 auto 20rpx;
		border-radius: 50rpx;
		width: 100%;
		position: relative;

		.icon-eyes {
			font-size: 24rpx;
			position: absolute;
			min-width: 100rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			border-radius: 20rpx;
			right: 40rpx;
			top: 20rpx;
			background-color: rgba(255, 255, 255, 0.5);
		}

		.icon-calendar {
			font-size: 24rpx;
			position: absolute;
			width: 200rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			border-radius: 20rpx;
			left: 40rpx;
			top: 20rpx;
			background-color: rgba(255, 255, 255, 0.5);
		}

		.image {
			border-radius: 50rpx;
			width: 100%;
		}

		.remen-play {
			background-color: rgba(255, 255, 255, 0.8);
			width: 90%;
			height: 100rpx;
			position: absolute;
			bottom: 30rpx;
			left: 5%;
			border-radius: 50rpx;
			display: flex;
			padding: 0 40rpx;

			.remen-play-left {
				display: flex;
				text-align: center;
				align-items: center;

				.text {
					font-weight: 700;
					font-size: 26rpx;
					width: 420rpx;
				}
			}

			.time {
				// float: right;
				color: #fe466b
			}
		}
	}

	/deep/.ive-ketang-title-wrap {
		margin-bottom: 10rpx;
	}

	/deep/.hot-title-wrap {
		margin-bottom: 10rpx;
	}

	/deep/.live-ketang-title-wrap {
		margin-bottom: 10rpx;
	}

	// 金牌军师
	.hot-class-main {
		white-space: nowrap;
		width: 100%;
		padding: 0rpx 10rpx;

		.hot-class {
			margin: 10rpx 0;
			// padding-right: 20rpx;
			width: 300rpx;
			height: 350rpx;
			border-radius: 30rpx;
			box-shadow: 0 0px 12px 0 rgba(0, 0, 0, 0.1);
			// display: flex;
			display: inline-block;
			// flex-wrap: wrap;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			text-align: center;
			margin-left: 10rpx;

			.top-info {
				margin: 0 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 0rpx;
				color: #fe466b;
				font-size: 16rpx;
				margin-bottom: 30rpx;
			}

			.name {
				margin-top: 20rpx;
				text-align: center;
				font-size: 35rpx;
				font-weight: 700;
			}

			.text {
				white-space: pre-wrap;
				margin: 0 10rpx;
				// height: 60rpx;
				text-align: center;
				font-size: 22rpx;
				color: #c3c3c3;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
		}
	}

	.more {
		color: #C7C7C7;
		width: 90rpx;
		height: 30rpx;
	}

	// 品牌故事
	.new-story-main {
		display: flex;
		flex-wrap: wrap;
		// flex-direction: row;
		justify-content: space-around;
		margin-bottom: 40rpx;

		.new-story-list {
			width: 340rpx;
			height: 240rpx;
			border-radius: 30rpx;
			box-shadow: 0 0px 12px 0 rgba(0, 0, 0, 0.1);
			position: relative;
			margin-bottom: 40rpx;

			.story-name {
				text-align: center;
				font-size: 22rpx;
				color: #ccc;
				width: 330rpx;
			}

			.image {
				width: 340rpx;
				height: 240rpx;
				border-radius: 30rpx;
			}

			.see {
				z-index: 100000;
				padding: 10rpx;
				font-size: 16rpx;
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				line-height: 10rpx;
				border-radius: 50rpx;
				min-width: 60rpx;
				background-color: rgba(255, 255, 255, 0.5);
			}

			.icon-calendar {
				z-index: 100000;
				padding: 10rpx;
				font-size: 16rpx;
				position: absolute;
				top: 20rpx;
				left: 20rpx;
				line-height: 10rpx;
				border-radius: 50rpx;
				width: 150rpx;
				background-color: rgba(255, 255, 255, 0.5);

				.icon {}
			}

			.play-menu {
				position: absolute;
				bottom: 0rpx;
				right: 10rpx;
			}
		}
	}

	// 倾斜字体加粗
	.font-style-xie {
		font-weight: 700;
		font-size: 32rpx !important;
		font-style: italic;
	}

	.check_class {
		color: #2C62EF !important;
		font-size: 34rpx;
		font-weight: bold;
		display: inline-block;
		width: 230rpx;
	}

	/deep/ .uni-navbar--fixed {
		width: 96%;
		height: 100rpx;
		padding-top: 30rpx;
		/* #ifdef MP-WEIXIN*/
		padding-top: 140rpx;
		/* #endif */
		position: fixed;
		top: 0;
		left: 6rpx;
		z-index: 999;
	}

	.new-img {
		border-radius: 40rpx;
		height: 180rpx;
	}

	.index-banner-wrap {
		overflow: hidden;
		height: 310rpx;
		transform: translateY(0);
		margin-top: 20rpx;
	}

	.s-all-wrap {
		position: relative;
	}

	.search-all-wrap {
		margin-left: 2%;
		margin-top: 10rpx;
		width: 90%;
		height: 60rpx;
	}

	.search-wrap {
		width: 100%;
		height: 100%;
		line-height: 60rpx;
		border-radius: 30rpx;
		margin-left: 20rpx;
		padding-left: 20rpx;
		background-color: #F5F5F5;
		float: left;
	}

	.search-wrap input {
		float: left;
		background-color: #F5F5F5;
		height: 100%;
		padding: 0;
	}

	.search-wrap text {
		margin-right: 20rpx;
		color: #C7C7C7;
	}

	.search-wrap input {
		width: 70%;
	}

	.new_gouwuche {
		position: relative;
		width: 80rpx;
		height: 80rpx;
	}

	.gouwunums {
		position: absolute;
		background-color: #DC2929;
		width: 26rpx;
		height: 26rpx;
		border-radius: 13rpx;
		margin-left: 40rpx;
		margin-top: 10rpx;
	}

	.gowucheimage {
		position: absolute;
		width: 70upx;
		height: 50upx;
		margin-top: 15rpx;
	}

	.carnums {
		width: 26rpx;
		height: 26rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 26rpx;
	}
	.index-course-wrap .know-item {
		width: 25%;
		width: 152rpx;
		margin-right: 27rpx;
	}

	.index-course-wrap .know-item:nth-child(4n) {
		margin-right: 0 !important;
	}

	.live-ketang-img {
		display: inline-block;
		width: 295rpx;
		height: 214rpx;
		background-color: green;
	}

	/deep/.uni-scroll-view ::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none;
		width: 0;
		height: 0;
		color: transparent;
		background: transparent;
	}

	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
		background: transparent;
	}

	.price-wrap {
		right: 10rpx !important;
	}

	.live-list-know {
		min-height: 220rpx;
		margin-top: 20rpx;
		box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
		padding-left: 0 !important;
	}


	.live-ketang-name {
		padding-left: 0 !important;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.live-c-title {
		width: 440rpx;
		height: 38rpx;
		// line-height: 38rpx;
	}

	.news-wrap {
		display: flex;
		align-items: center;
		height: 100rpx;

		.news-rtext {
			font-weight: 700;
			color: #748ffe;
			font-size: 28rpx;
		}

		.news-ltext {
			color: #434343;
			font-weight: 700;
			font-size: 28rpx;
		}
	}

	.news-title {
		display: inline-block;
		width: 100%;
	}

	.swiper-item {
		display: flex;
		align-items: center;
	}

	.swiper-wrap {
		width: 68%;
		height: 80rpx;
		line-height: 40rpx;
	}

	.news-arow {
		position: absolute !important;
		right: 22rpx !important;
	}
</style>